package ;

import easelhx.display.Bitmap;
import easelhx.display.SpriteSheet;
import easelhx.display.Stage;
import easelhx.js.Image;
import easelhx.utils.SpriteSheetUtils;
import js.HTMLCanvasElement;
import js.JQuery;
import js.Lib;

/**
 * ...
 * @author 
 */

class ExtractFrameExample implements IExample
{
	private var canvas:HTMLCanvasElement;
	private var stage:Stage;
	private var results:Dynamic;					//frame data to be displayed
	private var imgSeq:Image;

	public function new() 
	{
		canvas = cast Lib.document.getElementById("testCanvas");
		stage =  new Stage(canvas);
	}
	
	/* INTERFACE IExample */
	
	public function run():Void 
	{
		var body = new JQuery("body");
		body.append('<div id="content"></div>');
		
		imgSeq = new Image();		//bmp of the sprite sheet
		//wait for the image to load
		imgSeq.src = "assets/testSeq.png";
		imgSeq.onload = handleImageLoad;
	}
	
	private function handleImageLoad(event) {
		// create sprite sheet data from the loaded image, and define the animation sequences in it.
		// for example, {walkUpRight:[0,19]} defines an animation sequence called "walkUpRight" that
		// will play back frames 0 to 19 inclusive.
		var data = {
			images: [imgSeq],
			frames: {width:64,height:68},
			animations: {walkUpRight:[0,19], walkDownRight:[20,40], walkRight:[41,59]}
		};
		
		// create a spritesheet from the data:
		var spriteSheet:SpriteSheet = new SpriteSheet(data);

		// extract the first frame of the walkRight sequence as a new image:
		// could alternately use the frame number.
		var img:Image = SpriteSheetUtils.extractFrame(spriteSheet, "walkRight");
		
		stage.addChild(new Bitmap(event.target));
		stage.update();

		// add the newly created image to the bottom of this document:
		Lib.document.getElementById("content").appendChild(cast img);
	}
	
}